<template>
    <div>
        <!-- 标题 -->
    <van-nav-bar class="header">
      <template #left>
        <van-icon @click="$router.back()" color="#fff" name="arrow-left" size="20" />
        <span class="company">家政平台</span>
      </template>
    </van-nav-bar>
    <!-- 标题end -->
    <div class="active">
    <div class="action">
        <!-- 图片 -->
        <van-image
          width="100%"
          height="200"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <!-- 图片 -->
    </div>
    <div class="action2">
        <!-- 关注 -->
        <van-grid :border='false' :column-num="2">
          <van-grid-item text="注册家政人数" >
              <template #icon>
                  <span class="text">123</span>
              </template>
          </van-grid-item>
          <van-grid-item text="已认证客户数" >
              <template #icon>
                  <span class="text">123</span>
              </template>
          </van-grid-item>
        </van-grid>
        <van-button class="btn" type="info" round size="small">关注</van-button>
        <!-- 关注end -->
    </div>
    <div class="action2">
        <!-- 业务范围 -->
        <van-cell-group>
          <van-cell title="业务范围" >
              <template #icon>
                  <span class="icon"></span>
              </template>
          </van-cell>
        </van-cell-group>
        <van-grid :border='false' :gutter="10" :column-num="4">
            <van-grid-item to="/people">
                <div class="children"></div>
                <span>月嫂</span>
            </van-grid-item>
            <van-grid-item to="/people">
                <div class="children"></div>
                <span>育婴师</span>
            </van-grid-item>
            <van-grid-item to="/people">
                <div class="children"></div>
                <span>保姆</span>
            </van-grid-item>
        </van-grid>
        <!-- 业务范围end -->
        <van-tabs color='#3f51b5'>
          <van-tab title="公司资料">
          <!-- 公司资质 -->
              <van-cell title="证件信息" >
                <template #icon>
                    <span class="icon"></span>
                </template>
              </van-cell>
              <div>
                <van-image
                  class="img"
                  width="100"
                  height="100"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                <van-image
                  class="img"
                  width="100"
                  height="100"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                <van-image
                  class="img"
                  width="100"
                  height="100"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
              </div>
          <!-- 公司资质end -->
          <!-- 办公环境 -->
              <van-cell title="办公环境" >
                <template #icon>
                    <span class="icon"></span>
                </template>
              </van-cell>
              <div>
                <van-image
                  class="img"
                  width="100"
                  height="100"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                <van-image
                  class="img"
                  width="100"
                  height="100"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                <van-image
                  class="img"
                  width="100"
                  height="100"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
              </div>
          <!-- 办公环境end -->
          <!-- 获得荣誉 -->
              <van-cell title="获得荣誉" >
                <template #icon>
                    <span class="icon"></span>
                </template>
              </van-cell>
              <div>
                <van-image
                  class="img"
                  width="100"
                  height="100"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                <van-image
                  class="img"
                  width="100"
                  height="100"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                <van-image
                  class="img"
                  width="100"
                  height="100"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
              </div>
          <!-- 获得荣誉end -->
          <!-- 基本资料 -->
          <van-cell title="个人简介" >
             <template #icon>
                 <span class="icon"></span>
             </template>
           </van-cell>
           <div class="info">
               <span>123</span>
           </div>
           <!-- 简介 -->
           <van-cell title="个人简介" >
             <template #icon>
                 <span class="icon"></span>
             </template>
           </van-cell>
           <div class="info">
               <span>任职公司：</span><br>
               <span>籍贯民族：</span><br>
               <span>生肖属相：</span><br>
               <span>星座：</span><br>
               <span>出生日期：</span><br>
               <span>学历：</span><br>
           </div>
          </van-tab>
          <van-tab title="注册人员"></van-tab>
        </van-tabs>
    </div>
  </div>

  <!-- 按钮 -->
  <van-tabbar class="layout-tabbar" route>
      <van-tabbar-item>
        <van-icon name="share" size='35' />
        <span class="text">分享</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-icon name="wechat" size='35' />
        <span class="text">微信联系</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-icon name="phone" size='35' />
        <span class="text">电话联系</span>
      </van-tabbar-item>
  </van-tabbar>
</div>
</template>

<script>
export default {

}
</script>

<style scoped lang='scss'>
.header{
    height: 200px;
    font-weight: 700;
    color: #fff;
    background-color: #3f51b5;
}
.active{
    position: relative;
    transform: translateY(-50px);
    z-index: 99999;
    padding-bottom: 80px;
}
.action{
    margin: 0 20px;
    border-radius: 10px;
    background-color: #fff;
}
.action2{
    margin: 0 20px;
    // padding-bottom: 50px;
    border-radius: 10px;
    background-color: #fff;
    z-index: 99999;
    .icon{
        width: 10px;
        height: 30px;
        margin: 10px 10px 0 0;
        background-color: #3f51b5;
        }
    .children {
        width: 100px;
        height: 100px;
        border-radius: 50% !important;
        background: #f2f3f5;
        border-radius: 4px;
        text-align: center;
    }
    span{
      margin-top: 10px;
      font-size: 30px;
    }
    .text{
        font-size: 55px;
        color: #3f51b5;
    }
    .btn{
        width: 200px;
        height: 50px;
        margin-left: 250px;
        margin-bottom: 50px;

    }
    .img{
        margin-left: 20px;
    }
    .info{
      padding: 0 20px;
      font-size: 30px;
      color: #666;
    }
}
.van-tabbar--fixed{
       z-index: 99999999999999;
      ::v-deep .van-tabbar-item__text {
          display: flex;
          flex-direction: column;
          align-items: center;
          .text{
              margin-top: 10px;
          }
        }
    }
</style>
